<script>
export default {
  name: "五四人物"
}
</script>

<template>
  <div class="aa">
    <h1>主要领导</h1>
    <div class="content">
      <div class="shell">
        <img src="@/assets/people/16.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">陈独秀</div>
            <div class="title2">1879——1942</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">安徽怀宁人</span>
            <span class="tag">字仲甫</span>
          </div>
          <div class="introduce">
            <p>
              中国的五四运动在俄国十月革命影响下发生。陈独秀指出：十月革命以后，“中国人也受了两个教训：一是无论南北，凡军阀都不应当存在；一是人民有直接行动的希望。五四运动遂应运而生”。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/17.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">李大钊</div>
            <div class="title2">1889——1927</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">河北乐亭人</span>
            <span class="tag">字守常</span>
          </div>
          <div class="introduce">
            <p>
              1919年五四运动后，他更加致力于马克思主义的宣传，在《新青年》上发表《我的马克思主义观》，系统介绍马克思主义理论，在当时思想界产生重大影响，标志着马克思主义在中国进入比较系统的传播阶段。李大钊同志发表《再论问题与主义》等文章，通过批驳反马克思主义思潮，论证马克思主义符合中国需要的深刻道理。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/18.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">林长民</div>
            <div class="title2">1876——1925</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">福建闽侯人</span>
            <span class="tag">字宗孟</span>
          </div>
          <div class="introduce">
            <p>
              林长民任徐世昌总统顾问，极力反对段祺瑞内阁的亲日外交，主张拒绝在巴黎和约上签字，揭露丧权辱国的外交政策，引发轰轰烈烈的“五四”爱国运动。“五四”运动后，林长民被推为出席世界国联总会的中国首席代表。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/19.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">蔡元培</div>
            <div class="title2">1868——1940</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">浙江绍兴人</span>
            <span class="tag">字鹤卿</span>

          </div>
          <div class="introduce">
            <p>
              五四运动爆发后，蔡元培为抗议政府逮捕学生，于5月8日提交了辞呈。并于9日离京。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/20.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">胡适</div>
            <div class="title2">1891——1962</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">安徽绩溪人</span>
            <span class="tag">字适之</span>

          </div>
          <div class="introduce">
            <p>
              五四运动爆发。新文化运动也因政治的助力，迅速发展到全国各地，汇集成了全国规模的伟大文化革命的洪流。胡适和陈独秀大力倡导五四运动，二人成为五四运动的代表人物。胡适在“五四”新文化运动中，是革命统一战线中的一员，但相比较于李大钊、陈独秀，他较为温和，不怎么坚决武断
              。
            </p>
          </div>
        </div>
      </div>

    </div>

    <h1>学生代表</h1>
    <div class="content">
      <div class="shell">
        <img src="@/assets/people/1.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">方豪</div>
            <div class="title2">1894——1955</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">浙江金华人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              《北京学界全体宣言》起草人。倡导新文化运动、白话文运动。五四后留学海外，后来担任过国立中央大学校长、清华大学校长（1928年9月18日就职）。逝世于台北。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/2.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">罗家伦</div>
            <div class="title2">1897——1969</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">浙江金华人</span>
            <span class="tag">字志希</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              北京学生联合会及其后的全国学生联合会的首任主席。后在安徽、浙江等地长期从事教育工作。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/3.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">段锡朋</div>
            <div class="title2">1896——1948</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">江西永新人</span>
            <span class="tag">字书贻</span>
          </div>
          <div class="introduce">
            <p>
              北京学生联合会会长、北京中等以上学校学生联合会会长、全国学生联合会会长。逝世于上海。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/4.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">王自治</div>
            <div class="title2">1889——1965</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">甘肃正宁人</span>
            <span class="tag">字立轩</span>
            <span class="tag">北京大学学生</span>

          </div>
          <div class="introduce">
            <p>
              继段锡朋之后任北京学生联合会会长。后长期在甘肃省任职，并从事教育工作，曾任兰州大学校长。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/5.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">张国焘</div>
            <div class="title2">1897——1979</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">江西萍乡人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              北京学生联合会讲演部部长。后参与创建中国共产党，是中国共产党第一次全国代表大会代表。后来在长征中另立“中央”，并通缉毛泽东、张闻天、周恩来等人，全民族抗战爆发后，借机出逃投靠蒋介石加入国民党的特务组织，从事反共活动。最后逝世于加拿大。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/6.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">傅斯年</div>
            <div class="title2">1896——1950</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">山东聊城人</span>
            <span class="tag">字孟真</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              五四游行总指挥。五四后游学柏林、伦敦等地。归国后致力于学术研究，创立中央研究院历史语言研究所。并曾任台湾大学校长。逝世于台北。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/7.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">邓中夏</div>
            <div class="title2">1894——1933</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">湖南宜章人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              北京学生联合会总务干事，参与火烧赵家楼行动。是中国共产党创始人之一，长期担任中共高级领导人。被中国国民党逮捕后杀害于南京。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/8.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">许德珩</div>
            <div class="title2">1890——1990</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">江西九江人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              后创立九三学社，任主席。曾任全国人大常委会副委员长。病逝于北京。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/9.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">罗章龙</div>
            <div class="title2">1896——1995</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">湖南浏阳人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              杰出的政治活动家，后成为中国共产党高级领导人。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/10.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">高君宇</div>
            <div class="title2">1896——1925</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">山西静乐人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              参加领导了五四爱国运动，带领学生上街游行，火烧赵家楼，痛打章宗祥，组织各校罢课，发表革命文章。后成为中国共产党高级领导人。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/11.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">罗隆基</div>
            <div class="title2">1896——1965</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">江西安福人</span>
            <span class="tag">清华大学学生</span>
          </div>
          <div class="introduce">
            <p>
              五四运动时罗隆基以清华大学辛酉级学生领袖的身份，冲杀在示威队伍的最前列，成为一名勇敢的“五四”战士。 </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/12.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">王造时</div>
            <div class="title2">1903——1971</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">江西安福人</span>
            <span class="tag">清华大学学生</span>
          </div>
          <div class="introduce">
            <p>
              清华学校学生评议会主席（清华学运的领导机构），清华学校学生代表团成员，清华大学第一任学生会会长。曾经两次被捕（一次是在东安市场散发传单，一次是去向军阀政府请愿）。 </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/13.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">闻一多</div>
            <div class="title2">1899——1946</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">湖北蕲水人</span>
            <span class="tag">清华大学学生</span>
          </div>
          <div class="introduce">
            <p>
              全国学生联合会清华大学代表。后为诗人，学者，曾任西南联大教授。在昆明发表完演讲之后回家途中遭特务暗杀，身亡。 </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/14.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">瞿秋白</div>
            <div class="title2">1899——1935</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">江苏常州人</span>
            <span class="tag">北京大学学生</span>
          </div>
          <div class="introduce">
            <p>
              1919年参加五四运动，6月3日上街演讲被捕，6月8日获释。8月23日与各地学生代表集聚新华门抗议“马良祸鲁”被警察厅逮捕，8月30日警察厅释放了全部请愿代表。五四运动后，加入李大钊、张嵩年发起的马克思主义研究会。
            </p>
          </div>
        </div>
      </div>
      <div class="shell">
        <img src="@/assets/people/15.webp" alt="" class="cover">
        <div class="head">
          <div class="data">
            <div class="title1">郑振铎</div>
            <div class="title2">1898——1958</div>
          </div>
        </div>
        <div class="foot">
          <div class="tags">
            <span class="tag">浙江永嘉人</span>
            <span class="tag">北京铁道管理学校（今北京交通大学）学生</span>
          </div>
          <div class="introduce">
            <p>
              1919年5月，作为学生代表，参加“五四”爱国运动，并被选为福建学生抗日联合会领导人；6月，与陈仲陶等人发起组织救国演讲周刊社，创办《救国演讲周刊》；7月，与永嘉各校爱国知识分子组织新学会；8月，新学会会刊《新学报》创刊，任编辑；11月，与瞿秋白等人创办《新社会》旬刊，探讨社会改革并开始从事文学活动。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
.aa {
  background-size: cover;
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: rgb(220, 82, 82);
}

.content {
  display: flex;
  flex-wrap: wrap;
}


.shell {
  text-align: left;
  width: 30%;
  height: 500px;
  margin: 10px;
  background: #ffffff;
  position: relative;
}

.shell:not(:nth-child(3n)) {
  margin-right: calc(10% / 3);
}

.head {
  text-align: unset;
  height: 200px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.head::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("@/assets/back/1.webp");
  background-size: cover;
  z-index: -1;
  transform: skewY(-4deg);
  transform-origin: 0 0;
}

.cover {
  position: absolute;
  top: 100px;
  left: 25px;
  width: 100px;
  z-index: 2;
  border-radius: 10px;
  border: 2px #fff solid;
  box-shadow: 0 5px 10px #00000065;
}

.data {
  padding: 100px 0 0 150px;
  text-shadow: 0 0 20px #000;
}

.data .title1 {
  color: white;
  font-size: 50px;
  font: 900 50px '';
  margin-bottom: 5px;
  position: relative;
}

.data .title1 span {
  position: absolute;
  top: 17px;
  margin-left: 12px;
  background: #ffe44c;
  border-radius: 5px;
  color: #000000;
  font-size: 14px;
  padding: 0px 4px;
}

.data .title2 {
  color: #fff;
  font: 500 24px '';
}
h1{
  color: #fff;
}
.foot {
  line-height: 26px;
  color: #444;
}

.tags {
  padding-left: 30px;
  padding-top: 100px;
  width: auto;
  float: left;
  text-align: center;
}

.tag {
  background: rgb(162, 32, 42);
  color: #fff;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 14px;
  margin-right: 4px;
  line-height: 35px;
  cursor: pointer;
}

.tag:hover {
  background: rgb(211, 50, 60);
  color: #444;
}

.introduce {
  padding: 10px 0 0 35px;
  width: 90%;
  float: left;
}


</style>
